<template>
  <div @click="login">
    <el-container>
      <el-header>
        <ShopcarHeader>
          <span slot="header" class="font">购物车</span>
          <i class="el-icon-more" slot="icon"></i>
        </ShopcarHeader>
      </el-header>
      <el-main>
        <div v-for="(item,index) in shopcar" :key="index" class="big">
          <div class="left">
            <img :src="item.img" alt />
          </div>
          <div class="right">
            <p>{{item.title}}</p>
            <i>￥</i>
            <span class="price">{{item.price.split('.')[0]}}</span>.
            <em>{{item.price.split('.')[1]}}</em>
            <b>{{item.count}}</b>
            <div @click="del(item._id)" class="delete">删除</div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <MyFooter></MyFooter>
      </el-footer>
    </el-container>
  </div>
</template>
    
    <script>
import MyFooter from "../components/MyFooter";
import ShopcarHeader from "../components/ShopcarHeader";
import axios from "axios";
export default {
  name: "ShopCar",
  components: {
    MyFooter,
    ShopcarHeader
  },
  data() {
    return {
      shopcar: []
    };
  },
  methods: {
    login() {
      if (document.cookie == "") {
        this.$router.push({
          path: "/login"
        });
        this.$message({
          message: "登录失效请重新登录",
          center: true,
          showClose: true,
          type: "warning"
        });
      }
    },
    del(id) {
      axios
        .post("/login/delShopcar", {
          id
        })
        .then(res => {
          this.$message({
            message: res.data,
            center: true,
            showClose: true,
            type: "success"
          });
          axios.get("/login/getShopcar").then(res => {
      this.shopcar = res.data;
    });
        });
    }
  },
  mounted() {
    if (document.cookie == "") {
      this.$router.push({
        path: "/login"
      });
      this.$message({
        message: "登录失效请重新登录",
        center: true,
        showClose: true,
        type: "warning"
      });
    }
    axios.get("/login/getShopcar").then(res => {
      this.shopcar = res.data;
    });
  },
  destroyed() {
    if (document.cookie == "") {
      this.$router.push({
        path: "/login"
      });
      this.$message({
        message: "登录失效请重新登录",
        center: true,
        showClose: true,
        type: "warning"
      });
    }
  }
};
</script>
    
    <style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  height: 100%;
}
a {
  color: black;
  text-decoration: none;
}
li {
  list-style: none;
}
.el-container {
  display: flex;
  height: 177.867vw !important;
}
.el-header {
  width: 100vw;
  height: 11.7333vw !important;
  background-color: #fff;
}
.el-main {
  flex-grow: 1;
  background-color: #f6f6f6;
}
.el-footer {
  width: 100%;
  height: 13.3333vw !important;
}
.font {
  font-size: 4.8vw;
}
.big {
  display: flex;
  width: 100vw;
  height: 26.6666vw;
  margin-bottom: 2.6666vw;
  background-color: #fff;
  border-radius: 2.6666vw;
}
.left {
  width: 30%;
  height: 90%;
  margin: 1.3333vw;
  border-radius: 2.6666vw;
}
.right {
  position: relative;
  width: 70%;
  height: 100%;
}
.delete {
  position: absolute;
  bottom: 1.3333vw;
  right: 1.3333vw;
  font-size: 3.2vw;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 2.6666vw;
}
p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 3.2vw;
  margin: 1.3333vw 1.3333vw 9.3333vw 0;
}
i,
em {
  font-style: normal;
}
b{
  margin-left: 10vw;
}
</style>